<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>心</title>
		<style>
			/* 抓div元素  心主体 */
			div{
				width:200px ;
				height:200px ;
				background-color: #ff0000;
				/* 自适应居中 */
				margin: 240px auto;
				/* 旋转 */
				transform:rotate(135deg);
				/* 透明度属性 :属性值0~1 范围值 */
				opacity: .6;
				/*滤镜属性:光号:下阴影
				drop-shadow(X值 Y值 模糊颜色沒模糊范围) */
				filter: drop-shadow(0050px#ff0000);
				/* 2.动画属性 :关键帧名称  过渡时间 过渡方式 无限循环*/
				animation:heart .5s linear infinite;
				}
				/* 3.伪类选择器：给元素附加上效果的选择器
				 语法：div:hover{}  当鼠标悬停在div上，实现的样式效果
				 需求：鼠标悬停在中心位置改成圆
				 选择器:before 在元素前添加文本，通常与conent:""
				 选择器:after 在元素后添加文本,通常与conent:"" */
				/* 伪类选择器div_上方添加文本/画园  */
				div:before{
					content: "";/* 行转块 */
					/* 显示属性display:block;转成块级元素display:inline;转成行级元素display:none;元素消失 */
					display: block;
					width: 200px;
					height: 200px;
					background-color: #ff0000;
					border-radius: 50%;
					/*相对定位 */
					position: relative;
					left: -100px;
					}
				div:after{
					content: "";
					display: block;
					width: 200px;
					height: 200px;
					background-color: #ff0000;
					border-radius: 50%;
					/*相对定位 */
					position: relative;
					top:-100px;
				}
				/* ----动画------------ */
				/* 1.创建关键帧--手翻书  */
				@keyframes heart{
					/* 3个画面:a.等比例出现，防止跳帧 b.缩小比例 c.放大比例
					*/
				   0%{
					   /*转换属性:缩放属性值
						1表示等比例
						.8表示缩/0.8倍
						1.2表示放大1.2倍
						transform转换复合属性:旋转 缩放
						*/
					   transform:rotate(135deg)scale(1);
					   }
					30%{
						transform:rotate(135deg)scale(.8);
					}  
				100%{
					transform:rotate(135deg)scale(1.2);
				}	 
			}
			
			
		</style>
	</head>
	<body>
		<!-- 画一颗心 -->
		<div></div>
		<!-- 音乐 -->
		<audio src="renxi.mp3" autoplay loop></audio>
	</body>
</html>